<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="templates/template.xhtml">
	<ui:define name="content">
	    <h:outputScript name="script.js" />
    	<h2>${msgs.register}</h2>
    	<h:panelGroup id="info" layout="block" style="text-align: center;" />
    	<h:form id="registerForm">
			<h:panelGrid columns="3" style="margin: 0px auto" columnClasses="userDataLabel">
				<h:outputText value="${msgs.nick}:" />
				<h:inputText value="#{userBean.nick}" id="nick" required="true" style="width: 175px" >
					<f:ajax execute="@this" event="change" listener="#{userBean.checkNick}" render="nickInfo" />
				</h:inputText>
				<h:outputLabel id="nickInfo" value="#{userBean.ajaxNick}" style="font-size:9px; color:red; font-weight:normal;" />				
				
				<h:outputText value="${msgs.firstName}:" />
				<h:inputText value="#{userBean.firstname}" id="firstname" style="width: 175px" onblur="isAlphabet('registerForm:firstname', '${msgs.validIncorrect}');" onkeypress="isAlphabet('registerForm:firstname', '${msgs.validIncorrect}');" />
				<h:panelGroup id="firstnameInfo" layout="block" />
				
				<h:outputText value="${msgs.lastName}:" />
				<h:inputText value="#{userBean.lastname}" id="lastname" style="width: 175px" onblur="isAlphabet('registerForm:lastname', '${msgs.validIncorrect}');" onkeypress="isAlphabet('registerForm:lastname', '${msgs.validIncorrect}');" />
				<h:panelGroup id="lastnameInfo" layout="block" />
				
				<h:outputText value="${msgs.email}:" />
				<h:inputText value="#{userBean.email}" id="email" style="width: 175px" onblur="matchEmail('registerForm:email', '${msgs.validEmail}');" onkeypress="matchEmail('registerForm:email', '${msgs.validEmail}');" />
				<h:panelGroup id="emailInfo" layout="block" />
				
				<h:outputText value="${msgs.password}:" />
				<h:inputSecret value="#{userBean.password}" id="pass" binding="#{password}" required="true" style="width: 175px" >
					<f:validateLength minimum="4" />
				</h:inputSecret>
				<h:message for="pass" style="font-size:9px; color:red" />
				
				<h:outputText value="${msgs.confirmPassword}:" />
				<h:inputSecret id="confirmPassword" required="true" style="width: 175px">
					<f:validator validatorId="passwordValidator" />
					<f:attribute name="password" value="#{password.value}" />
				</h:inputSecret>
				<h:message for="confirmPassword" style="font-size:9px; color:red" />
				
				<h:outputText value="${msgs.description}:" />
				<h:inputTextarea value="#{userBean.description}" id="description" />
				<h:panelGroup id="descriptionInfo" layout="block" />
			</h:panelGrid>
			<h:commandButton value="${msgs.send}" id="send" action="register-result" styleClass="formButton" />
		</h:form>
	</ui:define>
</ui:composition>
</html>